<template>
	<view class="main">
		<u-navbar :is-back="true" title="添加商品" :background="background" back-icon-color="#000000" title-color="#000"
			title-bold="true"></u-navbar>
		<view class="shop_img">
			<image v-if="upurl!=''" :src="upurl" mode="" @click="upimg"></image>
			<view class="dont" @click="upimg" v-if="upurl==''">
				上传图片
			</view>
		</view>
		<view class="title">
			<view class="tit">
				商品标题
			</view>
			<textarea placeholder=" 请输入商品标题" maxlength="-1" v-model="name" @input="watchs()" />
		</view>
		<view class="type">
			<text>商品分类</text>
			<view class="types" @click="changetype(1)">
				<text>{{type==''?'请选择商品分类':type}}</text>
				<image src="../../../static/images/right.png" mode=""></image>
			</view>
		</view>
		<view class="type">
			<text>商品类型</text>
			<view class="types" @click="changetype(2)">
				<text>{{type2==''?'请选择商品类型':type2}}</text>
				<image src="../../../static/images/right.png" mode=""></image>
			</view>
		</view>
		<view class="type">
			<text>原价</text>
			<view class="types" >
				<input type="number" value="" placeholder="请输入原价" v-model="pirce1" />
			</view>
		</view>
		<view class="type">
			<text>现价</text>
			<view class="types" >
				<input type="number" value="" placeholder="请输入现价" v-model="pirce2"/>
			</view>
		</view>
		<view class="title">
			<view class="tit">
				商品描述
			</view>
			<textarea placeholder="请描述一下商品" maxlength="-1" v-model="content" @input="watchs()" />
		</view>
		<view class="specification">
			<text>规格</text>
			<image src="../../../static/images/guige.png" mode="" @click="ps(1)"></image>
		</view>
		<view class="confirm" v-if="!buttonstyle" @click="ps(2)">
			确定
		</view>
		<view class="confirm2" v-if="buttonstyle" @click="addshop">
			确定
		</view>
		<u-popup v-model="show" mode="bottom" height="700" border-radius="28" duration="300">
			<view class="lists">
				<view class="content" v-for="(item,index) in typelist" :key="index"
					@click="selecttype(item.id,item.name,1)">
					<text>{{item.name}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show2" mode="bottom" height="700" border-radius="28" duration="300">
			<view class="lists">
				<view class="content" v-for="(item,index) in type2list" :key="index"
					@click="selecttype(item.id,item.name,2)">
					<text>{{item.name}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				show: false,
				show2: false,
				typelist: [],
				type2list: [{
						id: 3,
						name: '外卖商品'
					},
					{
						id: 4,
						name: '到店消费商品'
					}
				],
				type: '',
				type2: '',
				upurl: '',
				name: '',
				content: '',
				shopid: '',
				shopid2: '',
				buttonstyle: false,
				url: '',
				pirce1: 0,
				pirce2: 0,
			}
		},
		onLoad() {
			// this.getstyle()

		},
		mounted() {

		},
		onShow() {
			this.gettypelist()
		},
		methods: {
			ps(index) {
				if (index == 1) {
					uni.showToast({
						title: '请先添加商品随后在商品列表中添加规格',
						icon: 'none',
						duration: 1000
					})
				} else {
					uni.showToast({
						title: '请将信息填写完整',
						icon: 'none',
						duration: 700
					})
				}
			},
			watchs() {
				if (this.category == '' || this.name == '' || this.content == '' || this.image == '') {
					this.buttonstyle = false
				} else {
					this.buttonstyle = true
				}
			},
			//添加商品
			addshop() {
				if (this.category == '' || this.name == '' || this.content == '' || this.image == '' || this.shopid2 ==
					'') {
					this.buttonstyle = false
					uni.showToast({
						title: '请将信息填写完整',
						icon: 'none',
						duration: 700
					})
				} else {
					this.buttonstyle = true
					global.$http.request({
						url: '/shopapi/goods/add',
						data: {
							token: uni.getStorageSync('token'),
							category: this.shopid,
							name: this.name,
							content: this.content,
							image: this.url,
							type: this.shopid2,
							sort: 0,
							price:this.pirce1,
							del_price:this.pirce2
						}
					}).then(res => {
						if (res.data.code = 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 700
							})
							setTimeout(function() {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2]; // 前一个页面
								uni.navigateBack({
									delta: 1,
									success: function() {
										beforePage.onLoad(); // 执行前一个页面的onLoad方法
									}
								})
							}, 700)
						}
					})
				}
			},

			//类型列表
			gettypelist() {
				global.$http.request({
					url: '/shopapi/goods/goodsCategorylist',
					data: {
						token: uni.getStorageSync('token'),
						shop_id: uni.getStorageSync('userinfo').shop_info.shop_id
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.typelist = res.data.data
					}
				})
			},
			changetype(index) {
				if (index == 1) {
					this.show = true
				} else if (index == 2) {
					this.show2 = true
				}

			},

			router() {
				uni.navigateTo({
					url: '../add_sp/add_sp'
				})
			},
			//选择类型
			selecttype(id, name, status) {
				if (status == 1) {
					this.show = false
					this.shopid = id
					this.type = name
					this.watchs()
				} else if (status == 2) {
					console.log(id);
					this.show2 = false
					this.shopid2 = id
					this.type2 = name
					this.watchs()
				}

			},
			//上传图片
			upimg() {
				var that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						global.$http.upload('/api/home/picterUp', {
							filePath: tempFilePaths[0], // 要上传文件资源的路径。
							name: 'images', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							formData: {
								token: uni.getStorageSync('token'),
							}, // HTTP 请求中其他额外的 form data
						}).then(res => {
							console.log(res.data.data.image);
							that.upurl = res.data.data.image
							that.url = res.data.data.images
							console.log(that.upurl);
						})
					}
				});
				this.watchs()
			},
			//获取规格列表
			// getstyle() {
			// 	global.$http.request({
			// 		url: '/shopapi/goods/Specifications',
			// 		data: {
			// 			token: uni.getStorageSync('token')
			// 		}
			// 	}).then(res => {
			// 		console.log(res.data.data);
			// 	})
			// }
		}
	}
</script>
<style lang="scss">
	page {
		font-family: PingFang SC;
		width: 750rpx;
		margin: 0 auto;
		background-color: #f7f7f7;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.shop_img {
				display: flex;
				margin-top: 2rpx;
				padding: 35rpx 25rpx;
				background-color: #fff;

				image {
					margin-right: 15rpx;
					width: 220rpx;
					height: 220rpx;
				}

				.dont {
					width: 220rpx;
					height: 220rpx;
					background: #E6E6E6;
					line-height: 220rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #808080;
				}
			}

			.title {
				background-color: #fff;
				margin: 2rpx 0;
				padding: 41rpx 0 0 21rpx;

				.tit {
					font-size: 30rpx;
					font-weight: bold;
					color: #808080;
				}

				textarea {
					padding-top: 10rpx;
				}
			}

			.type {
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 40rpx 20rpx;
				align-items: center;

				text {
					font-size: 30rpx;
					font-weight: bold;
					color: #808080;
				}

				image {
					width: 10rpx;
					height: 16rpx;
				}

				.types {
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
					display: flex;
					align-items: center;

					text {
						padding-right: 10rpx;
					}
					input{
						text-align: right;
					}
				}
			}

			.specification {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 20rpx;

				text {

					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
				}

				image {
					width: 46rpx;
					height: 46rpx;
				}
			}

			.confirm {
				width: 750rpx;
				text-align: center;
				padding: 34rpx 0;
				background: #808080;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 165rpx;
			}

			.confirm2 {
				width: 750rpx;
				text-align: center;
				padding: 34rpx 0;
				background: #FE4E00;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 165rpx;
			}

			.lists {

				.content {
					padding: 30rpx;
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
					border-bottom: 2rpx solid #f7f7f7;

					image {
						width: 18rpx;
						height: 18rpx;
					}

				}

			}

		}
	}
</style>
